<template>
  <div class="forget-wrap">
    <div class="forget-content">
      <div class="content-top-wrap">
        <div class="top-left-wrap">
          <h4 class="title">忘记密码</h4>
          <p class="title-desc">请按以下步骤完成密码重置...</p>
        </div>
        <div class="top-right-wrap">
          <img src="../assets/images/forget-top-img.png" alt="">
        </div>
      </div>
      <div class="content-form-wrap">
        <div class="logo-wrap">
          <img class="logo-img" src="../assets/images/login-top-img-circle.svg" alt="">
        </div>
        <!-- 重置密码 进度显示 -->
        <div class="reset-pwd-wrap">
          <ul class="progress-list">
            <li class="progress-item" :class="{'active':resetStepOneActive}">
              <div class="line reset" />
              <div class="progress-back reset">
                <i class="iconfont iconicon_mail_white" />
              </div>
              <p class="text reset">重置密码</p>
            </li>
            <li class="progress-item" :class="{'active':resetStepTwoActive}">
              <div class="line verify" />
              <div class="progress-back">
                <i class="iconfont iconicon_code_black fs20" />
              </div>
              <p class="text">验证口令</p>
            </li>
            <li class="progress-item" :class="{'active':resetStepThreeActive}">
              <div class="line new-pwd" />
              <div class="progress-back new-pwd">
                <i class="iconfont iconicon_npw_bule fs20" />
              </div>
              <p class="text new-pwd">输入新密码</p>
            </li>
          </ul>
        </div>
        <!--  邮箱 form -->
        <el-form
          v-show="resetStep === 1"
          ref="resetForm"
          class="login-form"
          :model="resetForm"
          :rules="resetRules"
          label-position="left"
        >
          <el-form-item class="mb24" label="邮箱" prop="email">
            <el-input v-model="resetForm.email" type="text" auto-complete="off" placeholder="请输入您的邮箱，我们将通过邮箱给您发送验证码！">
              <i slot="suffix" class="iconfont iconicon_mail_black slot-email-icon" />
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn-width-long"
              :loading="loading"
              size="medium"
              type="primary"
              @click.native.prevent="handleSendEmail"
            >
              <span v-if="!loading">发送邮件</span>
              <span v-else>送送中...</span>
            </el-button>
          </el-form-item>
        </el-form>
        <!-- 验证码 form -->
        <el-form
          v-show="resetStep === 2"
          ref="codeForm"
          class="login-form"
          :model="codeForm"
          :rules="codeRules"
          label-position="left"
        >
          <el-form-item class="mb24" label="验证码" prop="code">
            <el-input v-model="codeForm.code" type="text" auto-complete="off" placeholder="请输入验证码">
              <i slot="suffix" class="iconfont iconicon_code_black slot-icon" />
              <el-button slot="append" :disabled="btnDisabled?false:true" @click="handleSendEmail">重新发送邮件 ({{ countTime }})</el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn-width-long"
              :loading="loading"
              size="medium"
              type="primary"
              @click.native.prevent="handleCodeVerity"
            >
              <span v-if="!loading">确认验证</span>
              <span v-else>送送中...</span>
            </el-button>
          </el-form-item>
        </el-form>
        <!-- 重置新密码 form -->
        <el-form
          v-show="resetStep === 3"
          ref="newPwdForm"
          class="login-form"
          :model="newPwdForm"
          :rules="newPwdRules"
          label-position="left"
        >
          <el-form-item class="mb24" label="新密码" prop="newPwd">
            <el-input
              v-model="newPwdForm.newPwd"
              :type="isVisible?'text':'password'"
              auto-complete="off"
              placeholder="4位以上，由大小写字母、数字、符号组成"
            >
              <i
                slot="suffix"
                class="iconfont"
                :class="isVisible?'iconchakan':'iconmimabukejian'"
                @click.stop="viewPwd(1)"
              />
            </el-input>
          </el-form-item>
          <el-form-item class="mb24" label="再次输入新密码" prop="reNewPwd">
            <el-input
              v-model="newPwdForm.reNewPwd"
              :type="isVisibleRe?'text':'password'"
              auto-complete="off"
              placeholder="再次输入新密码"
            >
              <i
                slot="suffix"
                class="iconfont"
                :class="isVisibleRe?'iconchakan':'iconmimabukejian'"
                @click.stop="viewPwd(2)"
              />
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn-width-long"
              :loading="loading"
              size="medium"
              type="primary"
              @click.native.prevent="handleResetPwd"
            >
              <span v-if="!loading">确认保存</span>
              <span v-else>保存中...</span>
            </el-button>
          </el-form-item>
        </el-form>
        <!-- 忘记密码 -->
        <p class="forget-pwd">
          <i class="iconfont iconicon_back go-back" />
          <router-link to="/">返回登录</router-link>
        </p>
      </div>
    </div>

    <!-- 发送成功确认 提示 -->
    <modal-alert ref="modalAlert" :alert-info="alertInfo" />

    <!-- 密码重置成功 提示 -->
    <modal-alert ref="modalAlertReset" :alert-info="alertInfoReset" />

  </div>
</template>

<script>
import { validateEmail } from '@/utils/validate'
import { resetPwd, codeVerify, updatePwd } from '@/api/login'
import ModalAlert from '@/components/ModalAlert'
import Storage from '@/utils/storage'
var storage = new Storage()
export default {
  name: 'ForgetPwd',
  components: {
    ModalAlert
  },
  data() {
    const validateNewPwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else if (!(/^[a-zA-Z0-9\\W]{4,}$/.test(value))) {
        callback(new Error('密码格式错误,至少4位以上'))
      } else {
        callback()
      }
    }
    const validateReNewPwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.newPwdForm.newPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      resetForm: {
        email: ''
      },
      resetRules: {
        email: [
          { required: true, trigger: 'blur', message: '邮箱不能为空' },
          { validator: validateEmail, trigger: 'blur' }
        ]
      },
      loading: false,
      resetStep: 1,
      resetStepOneActive: true,
      resetStepTwoActive: false,
      resetStepThreeActive: false,
      alertInfo: {
        width: '40%',
        contentTitle: '验证码已成功发送到您的邮箱，请注意查收邮件！',
        contentDesc: '后提示框将自动关闭'
      },
      countTime: 60,
      btnDisabled: false,
      codeForm: {
        code: ''
      },
      codeRules: {
        code: [
          { required: true, trigger: 'blur', message: '验证码不能为空' },
          { pattern: /\d{6}/, trigger: 'blur', message: '验证码格式错误' }
        ]
      },
      newPwdForm: {
        newPwd: '',
        reNewPwd: ''
      },
      newPwdRules: {
        newPwd: [
          { validator: validateNewPwd, trigger: 'blur' }
        ],
        reNewPwd: [
          { validator: validateReNewPwd, trigger: 'blur' }
        ]
      },
      alertInfoReset: {
        width: '40%',
        contentTitle: '密码重置成功！',
        contentDesc: '后提示框将自动关闭, 并跳转到登录页面',
        jumpUrl: 'login'
      },
      isVisible: false,
      isVisibleRe: false
    }
  },
  methods: {
    handleSendEmail() {
      this.$refs.resetForm.validate(valid => {
        if (valid) {
          this.loading = true
          resetPwd(this.resetForm.email).then(res => {
            this.loading = false
            this.$refs.modalAlert.dialogVisible = true
            this.$refs.modalAlert.countDownTimer()
            this.resetStepTwoActive = true
            this.resetStep = 2
            this.countDownTimer()
          }).catch(res => {
            this.loading = false
          })
        }
      })
    },
    countDownTimer() {
      const tricker = () => {
        this.countTime--
        if (this.countTime === 0) {
          this.btnDisabled = true
          clearInterval(handler)
          this.countTime = 60
        }
      }
      const handler = setInterval(tricker, 1000)
      tricker()
    },
    handleCodeVerity() {
      this.$refs.codeForm.validate(valid => {
        if (valid) {
          const params = {
            code: this.codeForm.code,
            email: this.resetForm.email
          }
          this.loading = true
          codeVerify(params).then(res => {
            this.loading = false
            this.resetStepThreeActive = true
            this.resetStep = 3
          }).catch(res => {
            this.loading = false
          })
        }
      })
    },
    handleResetPwd() {
      this.$refs.newPwdForm.validate(valid => {
        const params = {
          email: this.resetForm.email,
          loginName: storage.get('loginName'),
          pwd: this.newPwdForm.newPwd
        }
        if (valid) {
          this.loading = true
          updatePwd(params).then(res => {
            if (res.code === 200) {
              this.loading = false
              this.$refs.modalAlertReset.dialogVisible = true
              this.$refs.modalAlertReset.countDownTimer()
            }
          }).catch(res => {
            this.loading = false
          })
        }
      })
    },
    viewPwd(rePwd) {
      if (rePwd === 2) {
        this.isVisibleRe = !this.isVisibleRe
      } else {
        this.isVisible = !this.isVisible
      }
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
  @import '../assets/styles/variables';
  @import "../assets/styles/mixin";

  .forget-wrap {
    @include clearfix;
    background: $background;
    width: 100%;
    height: 100%;
    .forget-content {
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -262px 0 0 -225px;
      width: 450px;
      height: 484px;
      .content-top-wrap {
        padding: 24px 15px 24px 24px;
        height: 112px;
        background: #d4dbf9;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        @include flex(space-between, flex-start, row);
        .top-left-wrap {
          color: $btnColor;
          .title {
            margin-bottom: 7px;
            font-size: 16px;
          }
          .title-desc {
            font-size: 13px;
          }
        }
        .top-right-wrap {
          width: 133px;
          height: 154px;
          img {
            margin-top: -8px;
            width: 100%;
          }
        }
      }
      .content-form-wrap {
        background: $white;
        padding: 76px 32px 25px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        .logo-wrap {
          position: absolute;
          top: 88px;
          left: 24px;
          width: 72px;
          height: 72px;
          border-radius: 50%;
          background: #eff2f7;
          @include flex(center, center, row);
          .logo-img {
            width: 35px;
          }
        }
        .reset-pwd-wrap {
          margin-bottom: 26px;
          .progress-list {
            @include flex(space-between, center, row);
            .progress-item {
              position: relative;
              text-align: center;
              z-index: 10;
              width: 100%;
              .iconfont {
                color: $btnColor;
              }
              &.active {
                .iconfont {
                  color: $white;
                }
                .progress-back {
                  background: $btnColor;
                }
                .text {
                  color: $btnColor;
                }
                .line {
                  background: $btnColor;
                }
              }
              .line {
                position: absolute;
                top: 24px;
                width: 100%;
                height: 2px;
                background: $borderColor;
                &.reset {
                  width: 60px;
                }
                &.verify {
                  left: -65px;
                  width: 150px;
                }
                &.new-pwd {
                  left: -40px;
                  width: 170px;
                }
              }
              .progress-back {
                position: relative;
                margin: 0 auto 12px;
                width: 48px;
                height: 48px;
                border: 2px solid $btnColor;
                border-radius: 50%;
                background: $white;
                @include flex(center, center, row);
                &.reset {
                  margin-left: 16px;
                }
                &.new-pwd {
                  margin-right: 16px;
                }
              }
              .text {
                font-size: 14px;
                color: $grayFontColor;
                &.reset {
                  margin-left: -50px;
                }
                &.new-pwd {
                  margin-right: -50px;
                }
              }
            }
          }
        }
        .login-form {
          ::v-deep .el-input {
            position: relative;
            margin-bottom: 4px;
            height: 32px;
            .el-input__inner {
              padding: 0 30px 0 13px;
              height: 32px;
              line-height: 32px;
            }
          }
          ::v-deep .el-button--primary {
            background: $btnColor;
            background-color: $btnColor;
          }
          ::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
            content: '';
          }
          ::v-deep .el-input__suffix{
            right: 13px;
          }
          .iconfont {
            &.slot-email-icon{
              display: inline-block;
              margin-top: 2px;
              font-size: 12px;
            }
            &.slot-icon {
              margin-top: 7px;
              display: inline-block;
            }
          }
          ::v-deep .el-button--primary {
            background: $btnColor;
            background-color: $btnColor;
          }
          ::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
            content: '';
          }
          ::v-deep .el-input-group__append {
            width: 132px;
          }
        }
        .forget-pwd {
          margin-top: 26px;
          text-align: center;
          color: $grayFontColor;
          font-size: 14px;
          .go-back {
            margin-right: 8px;
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
